<template>
  <div>
      <el-form ref="form" :model="user" label-width="80px" :rules="rules">

          <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" type="password" ></el-input>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
              <el-input v-model="user.age" type="number" ></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="user.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
              </el-radio-group>
          </el-form-item>

          <el-form-item label="爱好" prop="favorites">
              <el-checkbox-group v-model="user.favorites">
                  <el-checkbox :label="1" name="name">抽烟</el-checkbox>
                  <el-checkbox :label="2" name="name">喝酒</el-checkbox>
                  <el-checkbox :label="3" name="name">打牌</el-checkbox>
              </el-checkbox-group>
          </el-form-item>

          <el-form-item label="生日" prop="birthday">
              <el-date-picker 
              v-model="user.birthday" 
              type="datetime" 
              placeholder="请选择生日"
               value-format="yyyy-MM-dd HH:mm:ss"
               ></el-date-picker>
          </el-form-item>

          <el-form-item label="学历" prop="education">
              <el-select v-model="user.education" placeholder="请选择学历">
                  <el-option :value="1" label="小学"></el-option>
                  <el-option :value="2" label="中学"></el-option>
                  <el-option :value="3" label="大学"></el-option>
                  <el-option :value="4" label="研究生"></el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="自我介绍" prop="description">
              <el-input v-model="user.description" placeholder="请输入自我描述"></el-input>
          </el-form-item>

          <el-form-item align="left">
              <el-button type="primary" @click="handelSubmit">提交</el-button>
          </el-form-item>


      </el-form>
  </div>
</template>

<script>
export default {
    name:"Form3",
    data(){
        return{
            user:{
                username:"",
                password:"",
                age:"",
                sex:1,
                favorites:[1],
                birthday:"",
                education:1,
                description:""
            },
            rules:{
                username:[
                    {required:true,message:"用户名不能为空",trigger:"blur"}
                    ],
                password:[
                    {required:true,message:"密码不能为空",trigger:"blur"}
                ],
                age:[
                    {required:true,message:"年龄不能为空",trigger:"blur"}
                ],
                sex:[
                    {required:true,message:"性别不能为空",trigger:"blur"}
                ],
                favorites:[
                    {required:true,type:"array",message:"爱好不能为空",trigger:"change"}
                ],
                birthday:[
                    {required:true,message:"生日不能为空",trigger:"blur"}
                ],
                education:[
                    {type:"integer",required:true,message:"学历不能为空",trigger:"change"}
                ],
                description:[
                    {required:true,message:"自我介绍不能为空",trigger:"blur"}
                ]
            }
        }
    },
    methods:{
        
        handelSubmit(){
            this.$refs["form"].validate((valid)=>{
                alert(valid)
            })
        }
    }
}
</script>

<style>

</style>